<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 智能对话</title>
    <link rel="stylesheet" href="./lib/styles.css">
    <link rel="stylesheet" href="./lib/github.min.css">
    <script type="text/javascript" src="./lib/marked.min.js"></script>
    <script type="text/javascript" src="./lib/highlight.min.js"></script>
    <script type="text/javascript" src="./lib/purify.min.js"></script>
</head>

<body>
    <div class="chat-container">
        <div class="chat-header">
            <h1>AI 智能对话</h1>
        </div>
        <div class="chat-messages" id="chat-messages"></div>
        <div class="input-container">
            <input type="text" id="user-input" placeholder="请输入您的问题">
            <input type="text" id="user-id" placeholder="请输入您的名字">
            <button id="send-button">发送</button>
        </div>
    </div>
    
    <script type="text/javascript">

    // 获取 DOM 元素
    const chatMessages = document.getElementById('chat-messages');
    const userInput = document.getElementById('user-input');
    const userIdInput = document.getElementById('user-id');
    const sendButton = document.getElementById('send-button');
    

    // 发送消息的函数
    function sendMessage() {
        const message = userInput.value.trim();
        const userId = userIdInput.value.trim();

        if (userId === '') {
            return alert("请输入您的名称");
        }
        
        if (message === '') {
            return alert("您没有提出任何问题");
        }

        // 显示用户消息
        displayMessage(message, 'user-message');

        // 清空输入框
        userInput.value = '';
        // 创建 EventSource 连接后端流式接口
    	const eventSource = new EventSource(`/ai/streamChat?userId=${encodeURIComponent(userId)}&message=${encodeURIComponent(message)}`);
    	
        let aiResponse = '';
        let aiMessageElement;

        eventSource.onmessage = function (event) {
    		const data = JSON.parse(event.data);
        	const dataText = data.result.output.text;
        	console.log(dataText);
            if (dataText && dataText.length > 0) {
                aiResponse += dataText;

                if (!aiMessageElement) {
                    aiMessageElement = document.createElement('div');
                    aiMessageElement.classList.add('message', 'ai-message');
                    chatMessages.appendChild(aiMessageElement);
                }
    		    const rawHTML = marked.parse(aiResponse);
                const cleanHTML = DOMPurify.sanitize(rawHTML);
             	// 调试使用
                aiMessageElement.innerHTML = cleanHTML;
                // 滚动到最新消息
                chatMessages.scrollTop = chatMessages.scrollHeight;
                hljs.highlightAll();
            }
        };

        eventSource.onerror = function (error) {
            eventSource.close();
        };
    }

    // 显示消息的函数
    function displayMessage(message, className) {
        const messageElement = document.createElement('div');
        messageElement.classList.add('message', className);
        const rawHTML = marked.parse(message);
        const cleanHTML = DOMPurify.sanitize(rawHTML);
        messageElement.innerHTML = cleanHTML;
        chatMessages.appendChild(messageElement);
        // 滚动到最新消息
        chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    // 绑定发送按钮点击事件
    sendButton.addEventListener('click', sendMessage);

    // 绑定输入框回车事件
    userInput.addEventListener('keydown', function (event) {
        if (event.key === 'Enter') {
            sendMessage();
        }
    });
    
    </script>
</body>

</html>